<template>
    <div class="inBodyFullHeight flex flex-col justify-start items-start w-full ">
      
      <div class="p-4">
        <el-card :class="(isCollapse?' w-[calc(100vw-64px-2rem)] ':' w-[calc(100vw-200px-2rem)] ')+' h-[calc(100vh-88px-2rem)] '">
          <div class="flex flex-col ">
            <span class="text-xl font-bold">支付记录</span>
  
            <div class="pt-4">
              <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
                <span class="w-20">支付ID:</span>
                <el-input v-model="selectPayOrderAO!.payDtoId" clearable class="w-36" placeholder="请输入支付ID"></el-input>
              </div>
  
              <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
                <span class="w-20">支付金额:</span>
                <el-input v-model="selectPayOrderAO!.moneyBegin" clearable class="w-36" placeholder="请输入支付金额"></el-input>
                <span>~</span>
                <el-input v-model="selectPayOrderAO!.moneyEnd" clearable class="w-36" placeholder="请输入支付金额"></el-input>
              </div>
              
              <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
                <span class="w-20">支付状态:</span>
                <el-select v-model="selectPayOrderAO!.payStatus" clearable class="w-36">
                  <el-option :value="''" label="全部"></el-option>
                  <el-option :value="PayStatus.payStatus_wait" label="待支付"></el-option>
                  <el-option :value="PayStatus.payStatus_success" label="已支付"></el-option>
                  <el-option :value="PayStatus.payStatus_cancel" label="取消"></el-option>
                </el-select>
              </div>
  
              <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
                <span class="w-20">支付方式:</span>
                <el-select v-model="selectPayOrderAO!.payType" clearable class="w-36">
                  <el-option :value="''" label="全部"></el-option>
                  <el-option :value="PayType.payType_cash" label="现金"></el-option>
                  <el-option :value="PayType.payType_WeiXin" label="微信"></el-option>
                  <el-option :value="PayType.payType_ZhiFuBao" label="支付宝"></el-option>
                </el-select>
              </div>
  
              <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
                <span class="w-20">创建时间:</span>
                <el-date-picker v-model="selectPayOrderAO!.startTimeBegin" type="datetime" 
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择创建时间"/>
                <span>~</span>
                <el-date-picker v-model="selectPayOrderAO!.startTimeEnd" type="datetime" 
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="new Date(2000, 1, 1, 23, 59, 59)" placeholder="请选择创建时间"/>
              </div>
  
              <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
                <span class="w-20">支付时间:</span>
                <el-date-picker v-model="selectPayOrderAO!.successTimeBegin" type="datetime" 
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择支付时间"/>
                <span>~</span>
                <el-date-picker v-model="selectPayOrderAO!.successTimeEnd" type="datetime" 
                value-format="YYYY-MM-DD HH:mm:ss" :default-time="new Date(2000, 1, 1, 23, 59, 59)" placeholder="请选择支付时间"/>
              </div>
              <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
                <span class="w-20">取消时间:</span>
                <el-date-picker v-model="selectPayOrderAO!.cancelTimeBegin" type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择取消时间"/>
                <span>~</span>
                <el-date-picker v-model="selectPayOrderAO!.cancelTimeEnd" type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss" :default-time="new Date(2000, 1, 1, 23, 59, 59)" placeholder="请选择取消时间"/>
              </div>
  
  
            </div>
  
            <div class="pt-4 flex felx-row justify-start items-center">
              <el-button type="" @click="reset">重置</el-button>
              <el-button type="primary" @click="select">查询</el-button>
            </div>
  
            <div class="pt-4" v-loading="selectLoading">
              <el-table class="h-[calc(100vh-30rem)]" :border="true" :data="pageInfo?.list" style="width: 100%":row-key="(row:any)=>{row.payDtoId}">
                <el-table-column prop="payDtoId" label="支付ID" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="money" label="金额" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="payStatusName" label="支付状态" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column prop="payTypeName" label="支付方式" width="100"></el-table-column>
                <el-table-column prop="successTime" label="支付时间" width="180" ></el-table-column>
                <el-table-column label="是否退款" width="100">
                  <template #default="{row}">
                    <span v-if="row.isBack == 1">退款</span>
                  </template>
                </el-table-column>
                <el-table-column prop="startTime" label="创建时间" width="180"></el-table-column>
                <el-table-column prop="overTime" label="过期时间" width="180"></el-table-column>
                <el-table-column prop="cancelTime" label="取消时间" width="180"></el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                  <template #default="{row}">
                    <el-button type="primary" @click="willPayBack(row.payDtoId)" v-permission="permissionList.payBack" link>退款</el-button>
                    <el-button v-if="row.isBack == 1" type="primary" @click="showPayBackOrder(row.payDtoId)" link>退款记录</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
  
            <div class="m-4 flex flex-row justify-end">
              <el-pagination 
                  background 
                  v-model:current-page="selectPayOrderAO.pageNum"
                  v-model:page-size="selectPayOrderAO.pageSize"
                  layout="total, sizes, prev, pager, next, jumper" 
                  :page-count="Number(pageInfo?.totalPage)"
                  :total="Number(pageInfo?.total)"
                  @size-change="select"
                  @current-change="select"
                  prev-text="上一页"
                  next-text="下一页"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
  
    </div>


    <InnerDialog v-model="payBackDialog" :width="'500'" top="5vh">
      <template #header>
        退款
      </template>
      <template #default>
        <div>
          <div class="flex flex-row justify-start items-center m-4">
            <div class="w-36 required flex justify-start">输入退款金额:&nbsp;&nbsp;</div>
            <el-input clearable class="w-80"
            v-model="payBackAO!.money" placeholder="输入退款金额"></el-input>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="payBackCancel">取消</el-button>
          <el-button type="primary" @click="payBackSave">保存</el-button>
        </div>
      </template>
    </InnerDialog>

    <InnerDialog v-model="payBackOrderDialog" :width="'80%'" top="2vh">
      <template #header>
        <span class="text-xl font-bold">退款记录</span>
      </template>
      <template #default>
        <div>
          <div class="flex flex-col ">
            
            <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
              <span class="w-20">支付ID:</span>
              <el-input disabled v-model="selectPayBackOrderAO!.payDtoId" clearable class="w-36" placeholder="请输入支付ID"></el-input>
            </div>

            <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
              <span class="w-20">退款ID:</span>
              <el-input v-model="selectPayBackOrderAO!.payBackDtoId" clearable class="w-36" placeholder="请输入退款ID"></el-input>
            </div>

            <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
              <span class="w-20">退款金额:</span>
              <el-input v-model="selectPayBackOrderAO!.backMoneyBegin" clearable class="w-36" placeholder="请输入退款金额"></el-input>
              <span>~</span>
              <el-input v-model="selectPayBackOrderAO!.backMoneyEnd" clearable class="w-36" placeholder="请输入退款金额"></el-input>
            </div>

            <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
              <span class="w-20">退款时间:</span>
              <el-date-picker v-model="selectPayBackOrderAO!.backTimeBegin" type="datetime" 
              value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择退款时间"/>
              <span>~</span>
              <el-date-picker v-model="selectPayBackOrderAO!.backTimeEnd" type="datetime" 
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="new Date(2000, 1, 1, 23, 59, 59)" placeholder="请选择退款时间"/>
            </div>
          </div>

          <div class="pt-4 flex felx-row justify-start items-center">
            <el-button type="" @click="backReset">重置</el-button>
            <el-button type="primary" @click="backSelect">查询</el-button>
          </div>

          <div class="pt-4" v-loading="backSelectLoading">
            <el-table class="h-[calc(100vh-38rem)]" :border="true" :data="backPageInfo?.list" style="width: 100%":row-key="(row:any)=>{row.payDtoId}">
              
              <el-table-column prop="backTime" label="退款时间"  show-overflow-tooltip> </el-table-column>
              <el-table-column prop="backMoney" label="退款金额"  show-overflow-tooltip> </el-table-column>
              <el-table-column prop="payDtoId" label="支付ID"  show-overflow-tooltip></el-table-column>
              <el-table-column prop="payBackDtoId" label="退款ID" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>

          <div class="m-4 flex flex-row justify-end">
            <el-pagination 
                background 
                v-model:current-page="selectPayBackOrderAO.pageNum"
                v-model:page-size="selectPayBackOrderAO.pageSize"
                layout="total, sizes, prev, pager, next, jumper" 
                :page-count="Number(backPageInfo?.totalPage)"
                :total="Number(backPageInfo?.total)"
                @size-change="backSelect"
                @current-change="backSelect"
                prev-text="上一页"
                next-text="下一页"
            >
            </el-pagination>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="payBackOrderDialog = false">关闭</el-button>
        </div>
      </template>
    </InnerDialog>

  </template>
  
  <script setup lang="ts" name="SouYinTai">
  import { permissionList } from '@/config/PermissionConfig';
  import { usePayOrderHooks } from './PayOrderHooks';
  import { PayStatus, PayType } from './PayOrderTypes';
  import InnerDialog from '@/components/utils/InnerDialog.vue';

  let {
    isCollapse, selectPayOrderAO, reset, select, 
    selectLoading, pageInfo, willPayBack, payBackDialog,
    payBackAO, payBackCancel, payBackSave, payBackOrderDialog, 
    showPayBackOrder, selectPayBackOrderAO, backSelectLoading, backPageInfo,
    backReset, backSelect,
  } = usePayOrderHooks();

  </script>
  
  <style scoped></style>
  